<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>


  <link rel="stylesheet" href="./demo.css">
</head>
<body>

  <div class="tab-box">
    <ul class="clearfix">
        <li class="active">选项一</li>
        <li>选项二</li>
        <li>选项三</li>
    </ul>
    <div class="tab-cont">
        <div class="tab-item active">
            <h2>全国五一天气地图</h2>
            <p>今年的五一假期备受期待，旅游业预测将迎来“爆发式出游”，出游人数或达2亿。假期天气到底如何？</p>
        </div>
        <div class="tab-item">
            <h2>中国空间站天和核心舱</h2>
            <p>4月29日，中国空间站天和核心舱从海南文昌成功发射。当天，被誉为天和核心舱“同胞兄弟”的1:1结构验证件实物，在北京中国科技馆亮相展出，并与文昌发射现场连线互动举办“奇迹天宫，荣耀见证”主题活动。</p>
        </div>
        <div class="tab-item">
            <h2>相比于燃油车标准 怎样才是一辆合格的智能汽车</h2>
            <p>随着汽车诞生至今这130多年来的发展，市场和消费者对于汽车的评价有了一个很明显的共识。比如会以排量、轴距对车辆进行分级，比如会以舒适性、驾驶性、安全性等方面对车辆评价。所以对于燃油车，我们心中都会有一个指标去评价它的表现。</p>
        </div>
    </div>
  </div>


  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="./demo.js"></script>
</body>
</html>